<template>
  <div>
    <el-button type="text" icon="el-icon-back" size="mini" @click="back">返回</el-button>
    <div class="tip">规则信息添加</div>

    <el-form ref="form" :model="remindForm" label-width="150px">
      <el-form-item label="当前状态" required>
        <el-switch v-model="remindForm.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      </el-form-item>
      <el-form-item label="接受通知管理员" required>
        <el-button type="primary" @click="selectMemberVisible = true">+ 添加管理员</el-button>
      </el-form-item>
      <el-form-item>
        <el-tag v-for="tag in remindForm.members" :key="tag.name" closable @close="closeTagHandle(tag)" style="margin-right: 10px"> {{ tag.name }}</el-tag>
      </el-form-item>
      <el-form-item label="通知频率">
        <el-radio v-model="radio" label="1">每次通知</el-radio>
        <el-radio v-model="radio" label="2">每天通知一次（每日早上8点左右定时推送）</el-radio>
      </el-form-item>
    </el-form>

    <div class="button-strip">
      <el-button type="primary" @click="submit">设置</el-button>
      <el-divider direction="vertical" content-position="center"></el-divider>
      <el-button plain @click="back">返回</el-button>
    </div>

    <el-dialog title="选择管理员" :visible.sync="selectMemberVisible" width="60%" :close-on-click-modal="false" :destroy-on-close="true">
      <List_multiple_select ref="selectMember" :listFields="listFields" :dataSource="memberList" type="filter"/>
      <span slot="footer" class="dialog-footer">
                <el-button @click="selectMemberVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitMember">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  import List_multiple_select from "@/components/list_multiple_select/list_multiple_select";
  export default {
    name: "delete_remind_set_up",
    components: {List_multiple_select},
    props:{
      single:{
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        selectMemberVisible: false,
        memberList: [
          {
            name: '张三',
          },
          {
            name: '李四',
          },
        ],
        radio: '1',
        listFields: {
          name:'名称'
        },
        remindForm: {
          status: '',
          members:[],
          frequency:''
        },
      }
    },
    mounted() {
      this.remindForm.status = this.single.notice
    },
    methods: {
      back() {
        this.$emit("currentHandle", 'list')
      },
      submit(){
        this.single.notice = this.remindForm.status
        this.$emit("currentHandle", 'list')
      },
      closeTagHandle(tag) {
        this.remindForm.members.splice(this.remindForm.members.indexOf(tag), 1);
      },
      submitMember() {
        let data = this.$refs.selectMember.getData();
        this.remindForm.members = data
        this.selectMemberVisible = false
      },
    }
  }
</script>

<style scoped>
  .el-divider--vertical {
    height: 2em;
  }
</style>
